<template>
	<view>
		<view class="serveItem">
			<view style="background-color: #FFF;">
				<u-tabs
				       :list="cate"
									keyName="label"
				       lineWidth="40"
				       lineColor="#1677FF"
						@change="onChange"
				       :activeStyle="{
				           color: '#444445',
				           fontWeight: 'bold',
				       }"
				       :inactiveStyle="{
				           color: '#A4A9B7',
				           transform: 'scale(1)'
				       }"
				       itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;margin-top:12rpx;"
				   >
				   </u-tabs>
				<!-- <van-tabs :ellipsis="false" color="#1677FF" active="{{ active }}" @:change="onChange">
					<van-tab v-for="{{cate}}" title="{{item.label}}"></van-tab>
				</van-tabs> -->
			</view>
			<view class="z-margin-t-32 list-box z-flex-1">
				<scroll-view class="main-box z-padding-lr-32" scroll-y :show-scrollbar="false" :enhanced="true">
					<view class="list z-padding-24 z-flex-c" v-for="(item,index) in list" @tap="select(item)">
						<image class="cover z-flex-0 z-radius-12 z-margin-r-24" :src="cdn(item.image)" mode="aspectFill"></image>
						<view class="z-flex-1">
							<view class="z-flex-c">
								<view class="icon z-radius-4 z-flex z-font-18" v-if="item.shop_id === 0">严选</view>
								<view class="z-font-30 z-margin-lr-16" @tap.stop="detail(item.id)">{{ item.name }}</view>
								<image src="/static/index/to-img.png" class="more"></image>
							</view>
							<view class="z-flex-c z-margin-t-32">
								<view class="unit z-margin-t-8 z-font-22">¥</view>
								<view class="price z-font-30">{{ item.price }}</view>
							</view>
						</view>
						<image v-if="item.select === 2 " class="check" src="../../static/service/checkbox.png"></image>
						<image v-else-if="item.select === 1 " class="check" src="../../static/service/check.png"></image>
						<image v-else class="check" src="../../static/service/disabled.png"></image>
					</view>
					<!-- <van-empty description="暂无项目" v-if="{{finish && list.length === 0}}" /> -->
					<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</scroll-view>
			</view>

			<view class="btn-box z-flex-0 z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="z-btn" @tap="back">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 0,
			cheType: [],
			cate: [],
			category_id: '',
			goods: [],
			page: 1,
			finish: false,
			loading: false,
			list: [],
			skill_cate_id: '',
			safeBottom: `30px`,
			city: '',
			token: ''
		};
	},
	onLoad(options) {
		let arr = options.goods_ids ? options.goods_ids.split(',') : [];
		let goods = arr.map((value) => {
			return Number(value);
		});
		this.skill_cate_id = options.skill,
		this.goods = goods,
		this.city = options.city,
		this.token = options.token || ''

		this.getInfo();
	},
	methods: {
		detail(e) {
			let id = e;
			util.skip('/service/servedetail/servedetail?id=' + id);
		},
		select(e) {
			let item = e;
			if (item.select === 0) {
				return;
			}
			let id = e.id;
			let index = this.goods.indexOf(id);
			let goods = this.goods;
			let add = false;
			if (index === -1) {
				goods.push(id);
				add = true;
			} else {
				goods.splice(index, 1);
				add = false;
			}
			let arr = this.list.map((value) => {
				if (value.id === id) {
					value.select = add ? 2 : 1;
				}
				return value;
			});
			this.goods = goods,
			this.list = arr
		},
		onChange(e) {
			console.log(e)
			this.category_id = e.id
			this.reload();
		},
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		back() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.emit('selectGood', { goods: this.goods });
			this.util.back();
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			this.http.get(
				'goods/getapplygoods',
				{
					type: 0,
					city: this.city,
					category_id: this.category_id,
					page: this.page
				},
				true,
				false,
				this.token
			)
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let data = res.data.map((value) => {
						value.skill_cate_ids = value.skill_cate_ids.split(',');
						if (value.skill_cate_ids.indexOf(this.skill_cate_id) === -1) {
							value.select = 0;
						} else if (this.goods.indexOf(value.id) === -1) {
							value.select = 1;
						} else {
							value.select = 2;
						}
						return value;
					});
					let arr = this.list.concat(data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		},

		getInfo() {
			this.http.post('category/getlist', '', true, false, this.token).then((res) => {
				this.cate = res.data,
				this.category_id = res.data[0].id
				this.getList();
			});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}

.serveItem {
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.list-box {
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	overflow: hidden;
}

.main-box {
	height: 100%;
	box-sizing: border-box;
}

.list {
	background: #fff;
	border-bottom: 1rpx solid rgba(164, 169, 183, 0.2);
}
.list:last-of-type {
	border-bottom: none;
}
.cover {
	width: 100rpx;
	height: 100rpx;
}

.icon {
	width: 48rpx;
	height: 26rpx;
	background-color: #1c274c;
	color: #f7c566;
}

.more {
	width: 24rpx;
	height: 24rpx;
}

.unit {
	color: #ff9600;
}
.price {
	color: #ff9600;
}

.check {
	width: 32rpx;
	height: 32rpx;
	flex-shrink: 0;
}

.btn-box {
	width: 750rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	flex-shrink: 0;
	box-sizing: border-box;
}
</style>
